<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>系统-文件</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">
</head>
<body class="content-wrapper" style="padding: 15px">
<!--顶部条-->
<div style="padding: 0 7px 15px 7px" class="clearfix">
    <!--搜索输入框组-->
    <div class="input-group pull-left" style="width: 50%">
        <input id="keyword" class="form-control" type="search" placeholder="名称">
        <div class="input-group-append">
            <button id="search" class="btn btn-info btn-flat"><i class="fa fa-search"></i></button>
        </div>
    </div>
    <!--新增按钮-->
    <button id="add" class="btn btn-info pull-right"><i class="fa fa-upload"></i> 上传</button>
</div>
<!--数据展示-->
<div class="container-fluid">
    <table id="table" class="table table-sm table-hover table-bordered">
        <thead><tr>
            <th style="width: 3em">#</th>
            <th>名称</th>
            <th style="width: 10em">状态</th>
            <th style="width: 11em">时间戳</th>
            <th style="width: 11em">操作</th>
        </tr></thead>
        <tbody><tr>
            <td>{{index}}</td>
            <td>{{uuid}}</td>
            <td><span class="badge {{confirmedClass}}" data-confirmed="{{confirmed}}" data-remain-second="{{remainSecond}}">{{confirmedValue}}</span></td>
            <td>{{createAt}}</td>
            <td>
                <button class="btn btn-xs btn-outline-primary confirm {{confirmedDisabled}}" data-confirmed="{{confirmed}}" data-uuid="{{name}}" >
                    <i class="fa fa-pencil"></i> 确认
                </button>
                <button class="btn btn-xs btn-outline-info download" data-confirmed="{{confirmed}}" data-uuid="{{name}}" >
                    <i class="fa fa-download"></i> 下载
                </button>
                <button class="btn btn-xs btn-outline-danger remove" data-confirmed="{{confirmed}}" data-uuid="{{name}}">
                    <i class="fa fa-times"></i> 删除
                </button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--详情-->
<div id="detail" class="side-panel right width400 bg-white hide">
    <div class="bg-white" style="padding:20px">
        <input type="hidden" id="id" name="id">
        <div class="form-group">
            <label for="name" class="require" required>名称</label>
            <input type="text" class="form-control" id="name" name="name" placeholder="请填写名称" required>
        </div>
        <div class="form-group">
            <label for="file" class="require">文件</label>
            <div class="input-group">
                <input type="file" class="form-control" id="file" placeholder="请选择文件" required>
            </div>
            <div class="progress progress-xxs bg-white">
                <div id="progress" class="progress-bar bg-danger" style="width: 0%"></div>
            </div>
        </div>
        <div class="bg-white">
            <button id="ok" class="btn btn-info"><i class="fa fa-check"></i> 确定</button>
            <button id="cancel" class="btn btn-default"><i class="fa fa-times"></i> 取消</button>
        </div>
    </div>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var FileControl = function () {
        this.template = "";
        this.init = function () {
            this.template = $("#table > tbody").prop("innerHTML");
            $("#table > tbody").html("");
        }
        this.search = function () {
            var self = this;
            $.ajax({
                url: Url.fileList,
                type: HttpMethod.get,
                success: function (result, status, xhr) {
                    $("#table > tbody").html("");
                    var keyword = $("#keyword").val();
                    for (let i = 0; i < result.length; i++) {
                        if (Utils.isEmpty(keyword) || result[i].name.includes(keyword)) {
                            var confirmedValue, confirmedClass, confirmedDisabled;
                            if (result[i].confirmed === true) {
                                confirmedValue = "已确认";
                                confirmedClass = "bg-success";
                                confirmedDisabled = "disabled"
                            } else {
                                confirmedValue = result[i].remainSecond + "秒后过期";
                                confirmedClass = "bg-danger";
                                confirmedDisabled = ""
                            }
                            var html = self.template
                                .replace(new RegExp("{{index}}", "gm"), i + 1)
                                .replace(new RegExp("{{uuid}}", "gm"), result[i].uuid)
                                .replace(new RegExp("{{createAt}}", "gm"), result[i].createAt)
                                .replace(new RegExp("{{confirmed}}", "gm"), result[i].confirmed)
                                .replace(new RegExp("{{confirmedValue}}", "gm"), confirmedValue)
                                .replace(new RegExp("{{confirmedClass}}", "gm"), confirmedClass)
                                .replace(new RegExp("{{confirmedDisabled}}", "gm"), confirmedDisabled)
                                .replace(new RegExp("{{remainSecond}}", "gm"), result[i].remainSecond);
                            $("#table > tbody").append(html);
                        }
                    }
                }
            });
        }
        this.show = function () {
            $("#progress").removeClass("bg-warning").removeClass("bg-danger").removeClass("bg-success")
                .addClass("bg-info").css("width", "0%").parent().removeClass("bg-white");
            $("#detail input").removeClass("is-invalid").removeClass("is-valid").removeClass("is-warning").val("");
            $("#detail").removeClass("hide");
        }
        this.check = function () {
            var valid = true;
            $("#detail input").each(function (i, n) {
                if ($(n).attr("required") === "required" && Utils.isEmpty($(n).val())) {
                    valid = false;
                    $(n).removeClass("is-valid").addClass("is-invalid");
                } else {
                    $(n).removeClass("is-invalid").addClass("is-valid");
                }
            });
            return valid;
        };
        this.save = function () {
            var self = this;
            if (!this.check()) {
                return;
            }
            var name = $("#name").val();
            var files = $("#file").prop("files");
            var $progress = $("#progress");
            if (files.length > 0) {
                var formdata = new FormData();
                formdata.append("multipartFile", files[0]);
                formdata.append("name", name);

                var xhr = new XMLHttpRequest();
                xhr.upload.onerror = function (ev) {
                    parent.window.frameCtrl.toastr.error("[" + xhr.status + "] " + xhr.responseJSON.error + ": " + xhr.responseJSON.message);
                    $progress.removeClass("bg-info").addClass("bg-danger")
                };
                xhr.upload.onprogress = function (ev) {
                    var per = Math.round(ev.loaded / ev.total * 100);
                    $progress.css("width", per + "%");
                };
                xhr.upload.onloadstart = function (ev) {
                    $progress.removeClass("bg-warning").removeClass("bg-danger").removeClass("bg-success")
                        .addClass("bg-info").css("width", "0%").parent().removeClass("bg-white");
                };
                xhr.upload.onload = function (ev) {
                    $progress.removeClass("bg-info").addClass("bg-success").css("width", "100%");
                };
                xhr.upload.onloadend = function (ev) {

                };
                xhr.onreadystatechange = function (ev) {
                    if (xhr.readyState === XMLHttpRequest.DONE) {
                        if (xhr.status === 200) {
                            $("#detail").addClass("hide");
                            self.search();
                            parent.window.frameCtrl.toastr.success("上传成功！");
                        } else {
                            parent.window.frameCtrl.toastr.error("[" + xhr.status + "] " + xhr.responseJSON.error + ": " + xhr.responseJSON.message);
                        }
                    }
                };
                xhr.open(HttpMethod.post, Url.fileCreate, true);
                xhr.send(formdata);
            }
        }
        this.refresh = function () {
            $("#table > tbody > tr > td > span[data-remain-second][data-confirmed=false]").each(function (i, n) {
                var remainSecond = $(n).attr("data-remain-second") - 1;
                $(n).attr("data-remain-second", remainSecond).html(remainSecond < 0 ? "已过期" : (remainSecond + "秒后过期"));
            })
        }
        this.confirm = function (uuid) {
            var self = this;
            $.ajax({
                url: Url.fileConfirm.replace("{uuid}", uuid),
                type: HttpMethod.post,
                success: function (result, status, xhr) {
                    self.search();
                },
            });
        }
        this.remove = function (uuid) {
            var self = this;
            parent.window.frameCtrl.confirmCtrl.show("确认要删除该文件吗？", function () {
                $.ajax({
                    url: Url.fileRemove.replace("{uuid}", uuid),
                    type: HttpMethod.delete,
                    success: function (result, status, xhr) {
                        parent.window.frameCtrl.toastr.success("删除成功！");
                        self.search();
                    },
                });
            });
        }
        this.download = function (uuid) {
            var self = this;
            window.open(Url.fileDownload.replace("{uuid}", uuid), "_blank");
        }
        this.bindEvent = function () {
            var self = this;
            $("#table").on("click", ".confirm", function () {
                var uuid = $(this).attr("data-uuid");
                var confirmed = $(this).attr("data-confirmed");
                if ("false" === confirmed) {
                    self.confirm(uuid);
                }
            });
            $("#table").on("click", ".remove", function () {
                var uuid = $(this).attr("data-uuid");
                self.remove(uuid);
            });
            $("#table").on("click", ".download", function () {
                var uuid = $(this).attr("data-uuid");
                self.download(uuid);
            });
            $("#ok").bind("click", function () {
                self.save();
            });
            $("#cancel").bind("click", function () {
                $("#detail").addClass("hide");
            });
            $("#add").bind("click", function () {
                self.show();
            });
            $("#search").bind("click", function () {
                self.search();
            });
            $("#file").bind("change", function () {
                var files = $("#file").prop("files");
                if (files.length > 0) {
                    $("#name").val(files[0].name);
                } else {
                    $("#name").val("");
                }
            })
        }
    }

    var fileControl = new FileControl();
    fileControl.init();
    fileControl.bindEvent();
    fileControl.search();

    setInterval(fileControl.refresh, 1000);


</script>
</body>
</html>